
<template>
    <div class="footer">
        <div class="zs-style">
    
            <span >{{zs}}注</span>
            <span style="color:#ffce00;">{{2*zs}}元</span>
    
        </div>
    
        <div style="float:right;">
    
            <span style="float:right;text-align:right" @click="selectRandomBall()"  v-if="type=='random'" > 

                <img :src="randomIcon" height="15" width="15">
                <span>机选</span> 
                <span class="button-style" @click="doCheckBet()"> 确 &nbsp; 定 </span>
    
            </span>

            <span style="float:right;text-align:right" @click="doClearBall()"   v-if="type=='clear'" > 

                <img :src="randomIcon" height="15" width="15">
                <span>清空</span> 
                <span class="button-style" @click="doCheckBet()"> 确 &nbsp; 定 </span>
    
            </span>
     
      
        </div>
    
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {

                 randomIcon: require("@/assets/game/icon_random_30x30@2x.png")

        }
    },
    mounted() {
        //获取用户信息

    },
    props: ['zs', 'title','type'],
    computed: {
    },
    methods: {

        doClearBall() {

            this.$emit('clearBall')
        },

        selectRandomBall() {

            this.$emit('randomBall')

        },
        doCheckBet() {

            this.$emit('checkBet')

        }

    }

}

</script>

<style lang="scss" scoped>
.footer {
    width: 100%;
    height: 45px;
    line-height: 45px;
    margin: 0px;
    padding-left: 0px;
    background: rgb(222, 24, 39);
    position: fixed;
    bottom: 0;
    color: white;
}


.zs-style{
    float:left;
    margin:0px;
    padding:0px;
    text-align:left;
    font-size:16px;
    color:white;
    font-weight:800;
    padding-left:10px;
}

.button-style {

    margin-left: 10px;
    margin-right: 10px;
    width: 80px;
    background-color: #ffce00;
    height: 33px;
    text-align: center;
    padding: 6px 18px 6px 18px;
    border-radius: 4px;
}
</style>
